<!-- 订阅 -->
<template>
  <div class="web-sub">
    <div class="bg"></div>
    <div class="close flc cursor-pointer" @click="onClose">
      <img src="@/assets/icons/pc/pc-close.png" />
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
    <div class="circle">
      <slot name="logo"></slot>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="SubscribeWrapper"
>

// defineEmits(['close'])
const emit = defineEmits(['close'])

const onClose = () => emit('close')

</script>

<style lang="scss" scoped>
.web-sub {
  @apply absolute z-110;
  left: 31.5%;
  top: 10%;
  margin-left: -118px;
  width: 371px;
  height: 502px;

  .bg {
    @apply absolute h-full w-full;
    background: url('@/assets/images/pc/sub-bg.png') no-repeat;
    background-size: contain;

  }

  &::before {
    @apply absolute h-full w-full backdrop-filter backdrop-blur-10px;
    content: '';
    border-radius: 4px 4px 48% 4px;
    overflow: hidden;
  }

  .close {
    @apply absolute cursor-pointer;
    height: 24px;
    width: 24px;
    top: -11px;
    right: -11px;
    border-radius: 50%;
    // background: #E2E9F1;
    // border: 1px solid #F9FBFC;
    font-size: 17px;
  }

  .content {
    @apply h-full w-full relative;
    padding: 25px 26px 30px;
  }

  .circle {
    @apply absolute right-0 bottom-0;
    height: 124px;
    width: 124px;
    background: #404B57;
    border-radius: 50%;
    overflow: hidden;
  }
}

@media screen and (min-width:1440px) {
  .web-sub {
    top: 15%;
  }
}
</style>
